#dockLayout {

  .dock-item {
    .dock-icon {
      transition: transform 0.3s, margin 0.3s;
    }

    &:hover,
    &:active {
      .dock-icon {
        transform: scale(1.5) translateY(-8px);
        margin: 0 10px;
        animation: anims 0.2s forwards;
      }

      .dock-title {
        display: inline-block;
        // 只能在半角空格或连字符处换行。
        word-break: keep-all;
        background: #343a40;
        top: calc(-100% - 10px);
        animation: all 0.1s ease 0;

        // 倒三角
        .dock-out {
          border-color: #343a40 transparent transparent transparent;
          border-style: solid dashed dashed dashed;
          top: 100%;
          left: calc(100% / 2 - 10px);
        }
      }
    }

    .dock-title {
      display: none;
    }
  }

  .scale1 {
    .dock-icon {
      transform: scale(1.45) translateY(-7px);
      margin: 0 10px;
      animation: anims 0.2s ease 0.3;
    }
  }

  .scale2 {
    .dock-icon {
      transform: scale(1.3) translateY(-5px);
      margin: 0 7px;
      animation: anims 0.2s ease 0.3;
    }
  }

  .scale3 {
    .dock-icon {
      transform: scale(1.1) translateY(-3px);
      margin: 0 2px;
      animation: anims 0.2s ease 0.3;
    }
  }

  .dock-bounce {
    animation: bounce 1.5s ease 1;
  }
}
